<template>
  <div class="settings">
    <div class="page-header">
      <h2 class="page-title">账户设置</h2>
      <p class="page-subtitle">管理您的账户偏好和安全设置</p>
    </div>
    
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <!-- 安全设置 -->
        <el-card class="settings-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><Lock /></el-icon>
              <span>安全设置</span>
            </div>
          </template>
          <el-form label-width="120px">
            <el-form-item label="修改密码">
              <el-button type="primary" plain @click="showPasswordDialog = true">
                修改密码
              </el-button>
              <p class="form-tip">定期修改密码可以保护您的账户安全</p>
            </el-form-item>
            <el-form-item label="两步验证">
              <el-switch v-model="twoFactorEnabled" />
              <p class="form-tip">开启后，登录时需要验证码确认</p>
            </el-form-item>
            <el-form-item label="登录通知">
              <el-switch v-model="loginNotification" />
              <p class="form-tip">新设备登录时发送邮件通知</p>
            </el-form-item>
          </el-form>
        </el-card>
        
        <!-- 通知设置 -->
        <el-card class="settings-card" shadow="hover" style="margin-top: 24px">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><Bell /></el-icon>
              <span>通知设置</span>
            </div>
          </template>
          <el-form label-width="120px">
            <el-form-item label="交易通知">
              <el-switch v-model="transactionNotification" />
              <p class="form-tip">交易成功或失败时发送通知</p>
            </el-form-item>
            <el-form-item label="余额变动">
              <el-switch v-model="balanceNotification" />
              <p class="form-tip">余额变动时发送通知</p>
            </el-form-item>
            <el-form-item label="系统公告">
              <el-switch v-model="systemNotification" />
              <p class="form-tip">接收系统重要公告和更新</p>
            </el-form-item>
          </el-form>
        </el-card>
        
        <!-- 偏好设置 -->
        <el-card class="settings-card" shadow="hover" style="margin-top: 24px">
          <template #header>
            <div class="card-header">
              <el-icon class="header-icon"><Setting /></el-icon>
              <span>偏好设置</span>
            </div>
          </template>
          <el-form label-width="120px">
            <el-form-item label="语言">
              <el-select v-model="language" style="width: 200px">
                <el-option label="简体中文" value="zh-CN" />
                <el-option label="English" value="en-US" />
              </el-select>
            </el-form-item>
            <el-form-item label="主题">
              <el-radio-group v-model="theme">
                <el-radio label="light">浅色</el-radio>
                <el-radio label="dark">深色</el-radio>
                <el-radio label="auto">跟随系统</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="货币单位">
              <el-select v-model="currency" style="width: 200px">
                <el-option label="USDT" value="USDT" />
                <el-option label="CNY" value="CNY" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <!-- 操作记录 -->
        <el-card class="settings-card" shadow="hover">
          <template #header>
            <span>最近操作</span>
          </template>
          <el-timeline>
            <el-timeline-item timestamp="2024-01-15 10:30" placement="top">
              <p>修改了密码</p>
            </el-timeline-item>
            <el-timeline-item timestamp="2024-01-14 15:20" placement="top">
              <p>开启了交易通知</p>
            </el-timeline-item>
            <el-timeline-item timestamp="2024-01-13 09:10" placement="top">
              <p>修改了语言设置</p>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 修改密码对话框 -->
    <el-dialog v-model="showPasswordDialog" title="修改密码" width="400px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="当前密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            show-password
            placeholder="请输入当前密码"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
            placeholder="请再次输入新密码"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPasswordDialog = false">取消</el-button>
        <el-button type="primary" @click="handlePasswordSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { Lock, Bell, Setting } from '@element-plus/icons-vue'

const showPasswordDialog = ref(false)
const twoFactorEnabled = ref(false)
const loginNotification = ref(true)
const transactionNotification = ref(true)
const balanceNotification = ref(true)
const systemNotification = ref(true)
const language = ref('zh-CN')
const theme = ref('light')
const currency = ref('USDT')

const passwordFormRef = ref<FormInstance>()
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const validateConfirmPassword = (rule: any, value: string, callback: any) => {
  if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

const handlePasswordSubmit = async () => {
  if (!passwordFormRef.value) return
  
  await passwordFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.info('修改密码功能开发中')
      showPasswordDialog.value = false
      passwordForm.oldPassword = ''
      passwordForm.newPassword = ''
      passwordForm.confirmPassword = ''
    }
  })
}
</script>

<style scoped>
.settings {
  padding: 0;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.settings-card {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  font-size: 18px;
  color: #409eff;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin: 8px 0 0 0;
  line-height: 1.5;
}
</style>

